<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"	
	template="/pages/plantilla.xhtml">
	
	<ui:define name="title">SISPAGOS | Seguimiento Cptos.</ui:define>
	<ui:define name="contenido" >
	<f:view>
		<h:form id="myform" prependId="false">
		<table>
		<tr>
		<td><h3><h:outputText value="Escoja uno o mas Conceptos:"/></h3></td>
		<td>
			<DIV style="width:600px;height:200px; overflow:scroll;">
				<h:selectManyCheckbox value="#{estadisticaCptoController.cptosSeleccionados}" disabled="false" layout="pageDirection" >
					<f:selectItems value="#{estadisticaCptoController.cptos}" itemValue="#{cp.codigoB}" itemLabel="#{cp.nombreCptoPago}" var="cp"/>
				</h:selectManyCheckbox>
			</DIV>
		</td>
		</tr>
		</table>
		
		<p:commandButton value="Generar Grafico" actionListener="#{estadisticaCptoController.generarGrafico}" update="panelGraf" />
		<p:panel id="panelGraf">
			<p:lineChart id="category" value="#{estadisticaCptoController.categoryModel}" legendPosition="e"  
	     	title="Conceptos en el tiempo" xaxisAngle="90" />   
		</p:panel>

 		</h:form>
 		
 	</f:view>
	</ui:define>
</ui:composition>